<!DOCTYPE html>
<html>
<body>
  <div id="app"></div>
  <script type="module">
    // https://pokeapi.co/api/v2/pokemon?limit=150
    // https://pokeapi.co/api/v2/pokemon/1
    //const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=150');
    //console.log(await res.json());

    import htm from 'https://esm.sh/htm'
    import { createElement } from 'https://esm.sh/react'
    import { render } from 'https://esm.sh/react-dom'
    import { useFetch } from 'https://esm.sh/use-http'

    const html = htm.bind(createElement)

    const App = () => {
      const { loading, data = { results: [] } } = useFetch('https://pokeapi.co/api/v2/pokemon?limit=150', {}, [])

      return html`
        <div>
          <h1>Items</h1>

          ${loading && html`<div>Loading...</div>`}

          <ul>
            ${data.results.map(it => html`<li>${it.name}</li>`)}
          </ul>
        </div>
      `
    }

    render(html`<${App} />`, document.getElementById('app'))
  </script>
</body>
</html>